<template>
	<view class="answerMessage">
		<uni-tabchange :activeTab="activeTab" :isFixed="true" :tabArr="tabArr" @tabChangeSuccess="tabChangeSuccess"></uni-tabchange>
		<view class="font12 tip color999" v-if="activeTab==0">*我提问的问题有人回答</view>
		<view class="font12 tip color999" v-if="activeTab==1">*答案被选中后，有人付费看</view>
		<view class="font12 tip color999" v-if="activeTab==2 || activeTab==3">*我的{{activeTab==2?'回答':'回答、笔记、任务'}}有人{{activeTab==3?'点赞':'评论'}}</view>
		<view class="answerBox">
			<template v-for="(item,index) in infoData">
				<view class="answerOne" :key="index">
					<view class="flex queHeader">
						<view class="avatar">
							<image :src="item.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
						</view>
						<view class="con">
							<view class="font14 bold">{{item.createUserName || '匿名用户'}}</view>
							<view class="font12 flex alignCenter">
								<view class="">
									<text class="color999 time">{{item.createTime}}</text>
								</view>
							</view>
							<!-- 1提问  2回答  3任务  4笔记 -->
							<view class="color999 font14 operWord" v-if="activeTab==0">回答了您的提问</view>
							<view class="color999 font14 operWord" v-if="activeTab==1">查看了您的回答</view>
							<view class="color999 font14 operWord" v-if="activeTab==2">评论了您的{{item.jumpType==4?'笔记':(item.jumpType==2?'回答':(item.jumpType==3?'任务':'提问'))}}</view>
							<view class="color999 font14 operWord" v-if="activeTab==3">点赞了您的{{item.jumpType==4?'笔记':(item.jumpType==2?'回答':(item.jumpType==3?'任务':'提问'))}}</view>
							<view class="quesTitle color666 font14 hiddenOneline" @click="toQuesDetail(item)">{{item.txt}}</view>
						</view>
					</view>
					
				</view>
			</template>
		</view>
		<uni-nodata v-if="infoData.length==0"></uni-nodata>
	</view>
</template>

<script>
	import { messQuesList,messReadOper,messQuesTabNoReadNum } from "@/api/mine.js"
	export default {
		data() {
			return {
				activeTab:0,
				tabArr:[
				// {
				// 	title:'待回答'
				// },
				{
					title:'回答',
					num:0
				},
				{
					title:'查看',
					num:0
				},{
					title:'评论',
					num:0
				},{
					title:'点赞',
					num:0
				}],
				infoData:[],
				page:1,
				pageSize:10,
				pageTotal:0
			};
		},
		onLoad() {
			this.getList()
			this.allReadClick()
			this.getNoReadNum()
		},
		methods:{
			initPage(){
				this.page=1;
				this.infoData=[];
			},
			// 获取各个模块未读数量
			getNoReadNum(){
				messQuesTabNoReadNum().then((res)=>{
					if(res.code==100000){
						this.tabArr[0].num=res.data.answerUnReadTotal
						this.tabArr[1].num=res.data.viewUnReadTotal
						this.tabArr[2].num=res.data.commentUnReadTotal
						this.tabArr[3].num=res.data.likeUnReadTotal
					}
				})
			},
			getList(){
				let param={
					page:this.page,
					size:this.pageSize,
					bodyType:this.activeTab+1
				}
				messQuesList(param).then((res)=>{
					if(res.code==100000){
						console.log('列表',res)
						this.infoData=this.infoData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				})
			},
			tabChangeSuccess(obj){
				this.activeTab=obj.activeTab
				this.initPage()
				this.getList()
				this.allReadClick()
			},
			// 已读
			allReadClick(){
				let param={
					bodyType:this.activeTab+1,
					isAll:true,
					ids:[]
				}
				messReadOper(param).then((res)=>{
					if(res.code==100000){
						this.getNoReadNum()
					}
				})
			},
			// 提问详情
			toQuesDetail(item){
				if(this.activeTab<=1){
					let newItem={
						questionId:item.jumpId
					}
					uni.navigateTo({
						url:`/pages/send/question/questionDetail/questionDetail?item=${JSON.stringify(newItem)}`
					})
					return
				}else{
					// jumpType 1提问 ；2回答；3任务；4笔记
					if(item.jumpType==2){
						uni.navigateTo({
							url:`/pages/send/answer/answerDetail/answerDetail?id=${item.jumpId}&quesTitle=${item.title}`
						})
						return
					}else if(item.jumpType==3){
						uni.navigateTo({
							url:`/pages/send/task/taskDetail/taskDetail?id=${item.jumpId}`
						})
					}else if(item.jumpType==4){
						uni.navigateTo({
							url:`/pages/send/answer/answerDetail/answerDetail?quesTitle=${item.title}&id=${item.jumpId}&type=taskNote`
						})
					}
					
				}
				
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>
<style lang="scss">
page{
	background: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.tip{
	text-align: center;
	padding: 10rpx 0;
}
.answerBox{
	padding: 0 30rpx 0;
	box-sizing: border-box;
}
.queHeader{
	.avatar{
		width:76rpx;
		height:76rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		position: relative;
		image{
			border-radius: 50%;
			width:100%;
			height:100%;
		}
	}
	.con{
		flex:1;
	}
	.time{
		margin-right: 10rpx;
	}
}
.answerOne{
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	.operWord{
		margin: 20rpx 0 0;
	}
	.quesTitle{
		background: $pageBgColor;
		border-radius: 5rpx;
		padding: 0 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		margin:20rpx 0 0;
	}
}
</style>
